<script setup lang="ts">
import { ref } from 'vue'
import DialogComponent from '@/components/dialog.vue'

const Dialog = ref(null)
const list = ref([])
const add=()=> {
  Dialog.value.open('add')
}

const handleEdit = (row) => {
  Dialog.value.open('edit', row)

}
const handleDelete = (row) => {
  list.value = list.value.filter((item) => item.name !== row.name)

}
const changeList = (data) => {
  console.log(data,"data")
  if (data.type == 'add') {
    list.value.push(data.row)
  } else {
    list.value.forEach((i) => {
      if (i.age == data.row.age) {
        i.name=data.row.name
      }
    })
  }
}
</script>

<template>
  <main>
    <h1>This is an home page</h1>
    <el-button @click="add">添加</el-button>
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="age" label="年龄" width="180" />
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button size="small" @click="handleEdit(row)"> 编辑 </el-button>
          <el-button size="small" type="danger" @click="handleDelete(row)"> 删除 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <DialogComponent ref="Dialog" @changeList="changeList" />
  </main>
</template>
